import React, { useEffect, useState } from 'react'
import { request } from 'umi'
import { Avatar, Tag, Input, Button, Drawer } from "antd"
import { UserOutlined, AlignCenterOutlined } from '@ant-design/icons';
import axios from 'axios';
import "./list.less"
export default function List(props: any) {
    let [list, setList] = useState([])  // 数据列表
    let [tagList, setTagList] = useState([]) // 标签列表
    let [arr, setArr] = useState([]) // 选中列表
    let [username, setUsername] = useState("")
    const [visible, setVisible] = useState(false);

    const showDrawer = () => {
        setVisible(true);
    };

    const onClose = () => {
        setVisible(false);
    };
    // 点击确定

    function enter() {
        getList()
        setVisible(false);
    }
    // 获取数据
    function getList() {
        // request("https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface", {
        //     params: {
        //         status: props.stat,
        //         pageNo: 1,
        //         pageSize: 5,
        //         tags: arr,
        //         username: username ? username : ""
        //     },
        // })
        //     .then(res => {
        //         console.log(res)
        //         setList(res.data.List)
        //     })
        axios.get("https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface", {
            params: {
                status: props.stat,
                pageNo: 1,
                pageSize: 5,
                tags: arr,
                username: username ? username : ""
            },
        }).then(res => {
            setList(res.data.data.List)
        })
    }
    // 获取标签
    function getTag() {
        request("/api/tag").then(res => {
            setTagList(res)
        })
    }
    useEffect(() => {
        getList()
        getTag()
    }, [props.stat])
    // 搜索
    function serch() {
        getList()
    }
    // 获取文本框的值
    function inp(e: any) {
        setUsername(e.target.value)
    }
    // 判断tag是否选中
    function isTag(i: any) {
        tagList[i].flag = !tagList[i].flag
        if (tagList[i].flag == true) {
            arr.push(tagList[i].title)
        } else {
            console.log(arr, false, tagList[i].title)
            arr = arr.filter((ele: any) => {
                return ele != tagList[i].title
            })
        }
        console.log(arr, '3333')
        setArr([...arr])
    }
    // 重置
    function rest() {
        arr = []
    }
    return (
        <div>
            <div style={{
                textAlign: "center",
                display: "flex",
                justifyContent: "space-around"
            }}>
                <div style={{
                    width: "70%"
                }}>
                    <Input style={{
                        width: "100%",
                        border: "1px solid orange",
                        borderRadius: "50px",
                    }} onChange={inp}></Input>
                    <Button style={{
                        marginLeft: "-64px",
                        backgroundColor: 'orange',
                        borderRadius: "20px",
                        color: "#fff"
                    }} onClick={serch}>搜索</Button>
                </div>
                <div style={{
                    color: "#ccc",
                    marginTop: "5px"
                }}>
                    <span onClick={showDrawer}>筛选</span> <AlignCenterOutlined />
                </div>
            </div>
            <div>
                <div>
                    {list.length && list.map((ele: any) => (
                        <div className='list' style={{
                            listStyle: "none",
                            padding: "10px"
                        }} key={ele.id}>
                            <div style={{
                                display: "flex",
                                justifyContent: 'space-around'
                            }}>
                                <Avatar size={64} src={ele.img} style={{
                                    marginTop: "10px"
                                }} icon={<UserOutlined />} />
                                <div>
                                    <h1>{ele.username}</h1>
                                    <p>{ele.position}</p>
                                </div>
                            </div>
                            <p>{ele.introduce}</p>
                            {ele.tags.map((ele1: any, index: any) => (
                                <Tag key={index + 1} style={{
                                    borderRadius: "30px"
                                }} color="magenta">{ele1}</Tag>
                            ))}
                        </div>
                    ))}
                </div>
            </div>
            <Drawer style={{
            }} title="Basic Drawer" placement="right" onClose={onClose} visible={visible}>
                <ul style={{
                    listStyle: "none",
                }}>
                    {
                        tagList.length && tagList.map((ele: any, index) => (
                            <li
                                style={{
                                    float: 'left',
                                    marginTop: '20px'
                                }}
                                key={ele.id}>
                                <Tag style={{
                                    width: "100px",
                                    height: "40px",
                                    textAlign: "center",
                                    lineHeight: "40px",
                                    position: "relative",
                                    color: "#808080"
                                }}
                                    onClick={() => { isTag(index) }}
                                    color={ele.flag ? "orange" : "rgb(207 207 207)"}>{ele.title}
                                </Tag>
                            </li>
                        ))
                    }
                </ul>
                <div style={{
                    position: "absolute",
                    bottom: "300px",
                    borderRadius: "50px",
                    overflow: "hidden"
                }}>
                    <Button style={{
                        color: "orange",
                        backgroundColor: "#FFC8B4",
                        outline: "none"
                    }}
                        onClick={rest}
                    >重置</Button>
                    <Button style={{
                        color: '#fff',
                        backgroundColor: "orange"
                    }} onClick={enter}>确定</Button>
                </div>
            </Drawer>
        </div>
    )
}
